<template>
  <div>
    <div class="page-pagination">
      <div class="page-pagination-left">
        <div class="page-pagination-left-select">
          <el-select
            v-model="limit"
            placeholder="请选择"
            size="mini"
            @change="selectChange"
          >
            <el-option
              v-for="item in pageLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <span v-if="total" class="page-pagination-left-total"
          >总条数：{{ total }}</span
        >
      </div>
      <div class="page-pagination-right">
        <el-pagination
          :current-page="page"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="limit"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    page: { type: Number, default: 1 },
    total: { type: Number, default: 1000 },
    limit: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      pageLimit: [
        {
          value: 10,
          label: "10条/页",
        },
        {
          value: 20,
          label: "20条/页",
        },
        {
          value: 30,
          label: "30条/页",
        },
      ],
    };
  },
  methods: {
    selectChange(value) {
      this.$emit("limit", value);
      this.$emit("update:limit", value);
    },
  },
};
</script>

<style scoped lang="scss">
.page-pagination {
  background: white;
  padding: 0px 20px;
  padding-bottom: 18px;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  &-left {
    display: flex;
    &-total {
      margin-left: 15px;
      display: flex;
      align-items: center;
      font-size: 0.8rem;
    }
    &-select {
      width: 170px;
    }
  }
  &-right {
    display: flex;
  }
}
</style>
